<!--督导评教-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>学期：</span>
          <el-select
            v-model="xq"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="search-container-item">
          <span>月份：</span>
          <el-select
            v-model="yf"
            style="width: 88px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in yfList"
              :key="item.value"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>

        <div class="search-button">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span  @click="selectGroup">查询</span>
        </div>
      </div>
     
    </div>
    <div class="table-container">
      <el-table
        tooltip-effect="light"
        :data="tableDatas"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column
          prop=""
          label="操作"
          width="132"
          align="center"
          class-name=""
          label-class-name=""
        >
          <template slot-scope="scope">
            <div class="wrapper-button">
              <div class="edit-button" >
                <img
                  src="../../../assets/assessment/icon-plan-record-detail.png"
                  alt=""
                />
                <span
                  @click="RouterTo('/teacher/appraisal/addSupervisionInformations',scope.row.id)">修改</span
                >
              </div>
              <div class="search-button"> 
                <img src="../../../assets/assessment/icon-search.png" alt=""/>
                <span
                  @click="RouterTo('/teacher/appraisal/addSupervisionInformationsr',scope.row.id )">查看</span>
              </div>
              <div class="delet-button" >
                <img
                   src="../../../assets/assessment/icon-plan-record-save.png"
                  alt=""
                />
                <span
                  @click="deletGroup(scope.row.id)">删除</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="skrq" label="日期" width="136" align="center">
        </el-table-column>
        <el-table-column
          prop="tkjc"
          label="听课节次"
          width="134"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="kcmc"
          label="课程名称"
          width="140"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="skjy" label="教员" width="133" align="center">
        </el-table-column>
        <el-table-column prop="jxb" label="教学班" width="158" align="center">
        </el-table-column>
        <el-table-column prop="cd" label="上课地点" width="147" align="center">
        </el-table-column>
        
       <el-table-column
          prop="pdfs"
          label="评价分数"
          width="137"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="pjdj"
          label="评价等级"
          width="137"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="tckr"
          label="督导专家"
          width="147"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="zjpy"
          label="评语"
          width="268"
          header-align="center"
        >
          <!-- <template slot-scope="scope">
            <template v-if="scope.row.zjpy.length > 36">
              <span
                v-if="currentCell === scope.$index"
                @mouseleave="cellLeave()"
              >{{ scope.row.zjpy }}</span
              >
              <span v-else
              ><span
                @mouseover="cellMouseEnter(scope.$index)"
                @mouseleave="cellLeave()"
              >{{ dealCommonn(scope.row.zjpy) }}</span
              ></span
              >
            </template>
            <template v-else>
              <span>{{ scope.row.zjpy }}</span>
            </template>
          </template> -->
        </el-table-column>
       
      </el-table>
    </div>


    <div class="bottom-block">
      <div class="text">授课教员名字后加“*”为课程负责人</div>
    </div>
    <div class="pagination-block">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :page-size="2"
         @current-change="handleCurrentChange"
        layout="prev, pager, next, jumper"
        :total=total
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import {supervisionlist} from "@/api/teacher/supervision";
import {selectGroup,yueGroup,deletGroup} from "@/api/teacher/admin";
export default {
  data() {
    return {
      total:"",
      pagesize:"10",
      current:"1",
      currentCell: "",
      employeeid: '1',
      id: '',
      xq: "2022春",
      xqList: [
        {
          value: "2020春",
          label: "2020春",
        },
        {
          value: "2020夏",
          label: "2020夏",
        },
      ],
      yf: "2022-03",
      yfList: [
        {
          value: "12月",
          label: "12月",
        },
        {
          value: "11月",
          label: "11月",
        },
      ],
      tableDatas: [
        {
          id: '',
          schooltimeday: "2021-02-16",
          schooltimeweek: "星期一",
          listenclass: "1，2，3",
          classesname: "高级数学",
          employee: "高教员*",
          classes: "教学一班",
          jiaoyanshi: "教室三",
          employeedep: "单位三",
          evaluatescores: "98",
          orderofevaluation: "A",
          expertcomments: "如果内容很多的情况下，放不开的内容像Excel表一样隐藏起来，鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示鼠标点击显示",
          statistics: "已提交",

        },
      ],
    };
  },
  mounted() {
    // this.supervision();
    this.selectGroup(),
    this.yueGroup()
  },
  methods: {
  
    //月份查询接口
    yueGroup(){
      let obj = {
          term : this.xq
       }
      return new Promise(resolve => {
         
         yueGroup(obj).then((res) => {
            this.yfList = res.data.data
            
            console.log(res.data.data,"11111轻轻巧巧轻轻巧巧轻轻巧巧1")
        })
      })
     
    },
    //按条件查询
    selectGroup(){
      let obj = {}
       obj.supervisionInfoVO ={
          month : this.yf,
          term : this.xq,
          sqsjlx:"督导结果查看"
       },
       obj.query={
          size :"2",
          current : this.current 
       }
      

      console.log(obj,"22222222222222222")
       return new Promise(resolve => {
         console.log(obj,"111111111111111111111111")
         selectGroup(obj).then((res) => {
            this.tableDatas = res.data.data.records
            this.total = res.data.data.total
            console.log( this.total,"aaaaaaaaaaaaaaaaaaaaa")
        })
      })
    },
    
    RouterTo(path, id) {
      console.log("================" + id)
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      })
    },
    //删除按钮
    deletGroup(val){

      let id = {}
      id = val
      return new Promise(() => {
        deletGroup(id).then(res => {
          console.log("删除成功",id)
        })
      })
    
    },
    dealCommonn(item) {
      return item.substring(0, 36) + "...";
    },
    cellMouseEnter(index) {
      this.currentCell = index;
    },
    cellLeave() {
      this.currentCell = "";
    },
    handleCurrentChange(val) {
      this.current = val
      this.selectGroup()
      console.log(this.current,"999888")
    }

  },
};
</script>
<style lang="less" scoped>
 .search-container-left {
      display: flex;
      flex-direction: row;
    }
.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }

  .search-button {
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 27px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;

    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }

    > img {
      width: 19px;
      height: 19px;
      margin-right: 4px;
    }
  }

  .edit-button {
    .search-button;
    background: #dfffef;
    border: 1px solid #02c86c;

    > span {
      color: #02c86c;
    }
  }
  .delet-button {
    .search-button;
   background: #ffefef;
    border: 1px solid #ff3819;

    > span {
       color: #fb563c;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/supervision.less";

.table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.export-button {
  margin-top: 15px;
  width: 153px;
  height: 28px;
  line-height: 28px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  > span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #f3b815;
  }

  > img {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
}
</style>
